/* 
    Document   : side
    Created on : 21-ago-2011, 15.45.44
    Author     : francesco falanfa

*/
#side {
    float:right;
    margin: 20px 0px 0px 0px;
    width:390px;
 }

#side_about {
    float:right;
    margin: 20px 0px 0px 0px;
    width:250px;
    color: ivory;
 }

 #sponsor0 {
    position: relative;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    behavior: url(border-radius.htc);
    min-height: 500px;
    width: 150px;
    overflow: auto;
    margin: 0px 0px 10px 0px;
    float: left;
}

#sponsor0 h3{
    margin: 0px;
    color: black;
    font-family: Lucida Grande, Verdana;
}

#sponsor1{
    background-color: #2B60DE;
    position: relative;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    behavior: url(border-radius.htc);
    min-height: 100px;
    width: 220px;
    overflow: auto;
    margin: 0px 20px 20px 10px;
}

#sponsor2{
/*
    background-color: #306EFF;
    position: relative;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    behavior: url(border-radius.htc);
    min-height: 100px;
    width: 220px;
    overflow: auto;
    margin: 20px 20px 20px 10px;
*/
    position: relative;
    width: 220px;
    overflow: auto;
    margin: 20px 20px 20px 10px;
    color: black;
}

#sponsor3{
    /*
    background-color: #357EC7;
    position: relative;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
    behavior: url(border-radius.htc);
    min-height: 100px;
    width: 220px;
    overflow: auto;
    margin: 20px 20px 20px 10px;
    */
    position: relative;
    width: 220px;
    overflow: auto;
    margin: 20px 20px 20px 10px;
    color: black;
}

#box {
    font-size: 13px;
    margin: 5px;
}

#box h1 {
    font-size: 20px;
    margin: 0px 0px 0px 0px;
}

#box h2 {
    font-size: 14px;
    margin: 0px 0px 0px 0px;
}

#box h2.about {
    font-size: 20px;
    margin: 0px 0px 0px 0px;
}

.cpojer-links a  {
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: #3a599d;
  /*
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
  */
}
.cpojer-links a:hover {
  background: #3a599d;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

.cpojer-links2 a  {
  display: inline-block;
  padding: 4px;
  outline: 0;
  color: ivory;
  /*
  -webkit-transition-duration: 0.25s;
  -moz-transition-duration: 0.25s;
  -o-transition-duration: 0.25s;
  transition-duration: 0.25s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  -webkit-transform: scale(1) rotate(0);
  -moz-transform: scale(1) rotate(0);
  -o-transform: scale(1) rotate(0);
  transform: scale(1) rotate(0);
  */
}
.cpojer-links2 a:hover {
  background: ivory;
  text-decoration: none;
  color: #3a599d;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transform: scale(1.05) rotate(-1deg);
  -moz-transform: scale(1.05) rotate(-1deg);
  -o-transform: scale(1.05) rotate(-1deg);
  transform: scale(1.05) rotate(-1deg);
}
.cpojer-links2 a:nth-child(2n):hover {
  -webkit-transform: scale(1.05) rotate(1deg);
  -moz-transform: scale(1.05) rotate(1deg);
  -o-transform: scale(1.05) rotate(1deg);
  transform: scale(1.05) rotate(1deg);
}

/* entire wrapper */
#animationWrapper  {
/*
  width:300px;
*/
  font-family:"proxima-nova-1","proxima-nova-2","Helvetica Neue","Arial",sans-serif;
  background:#222;
  padding: 20px 30px 30px 20px;
  -moz-border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
  border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

/* link which encapsulates SPANs */
#animationWrapper a {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 35px;
  line-height: 0.9em;
/*  margin-bottom: 10px; */
  display: block;
  position: relative;
  color: #E58;
  text-decoration: none
}

/* span and a - "workers" */
#animationWrapper a, #animationWrapper span {
  -webkit-transition: all 0.12s ease-out;
  -moz-transition: all 0.12s ease-out;
  -o-transition: all 0.12s ease-out;
  -ms-transition: all 0.12s ease-out;
  transition: all 0.12s ease-out;
}

#animationWrapper span {
  display: block;
  color: #555;
  text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black;
}

/* special size for the first item */
#animationWrapper .span1 {
  font-size: 30px;
  line-height: 0.8em;
}

#animationWrapper .span2 {
  font-size: 20px;
  line-height: 0.8em;
}

#animationWrapper .span3 {
  font-size: 25px;
  line-height: 0.8em;
}

#animationWrapper .span4 {
  font-size: 28px;
  line-height: 0.8em;
}


#animationWrapper a:hover {
    color: #fff ;
    top: -3px;
    left: -3px;
}

/* all spans become white */
#animationWrapper a:hover span {
  color:#fff;
}

/* different colors for each SPAN */
#animationWrapper a:hover .span1 {
    text-shadow: 1px 1px #58E, 2px 2px #58E, 3px 3px #58E, 4px 4px #58E, 5px 5px #58E, 6px 6px #58E, 7px 7px #58E, 8px 8px #58E, 9px 9px #58E, 10px 10px #58E, 11px 11px #58E;
}

#animationWrapper a:hover .span2 {
    text-shadow: 1px 1px #F90, 2px 2px #F90, 3px 3px #F90, 4px 4px #F90, 5px 5px #F90, 6px 6px #F90, 7px 7px #F90, 8px 8px #F90, 9px 9px #F90, 10px 10px #F90, 11px 11px #F90;
}

#animationWrapper a:hover .span3 {
    text-shadow: 1px 1px #3C7, 2px 2px #3C7, 3px 3px #3C7, 4px 4px #3C7, 5px 5px #3C7, 6px 6px #3C7, 7px 7px #3C7, 8px 8px #3C7, 9px 9px #3C7, 10px 10px #3C7, 11px 11px #3C7;
}

#animationWrapper a:hover .span4 {
    text-shadow: 1px 1px #E58, 2px 2px #E58, 3px 3px #E58, 4px 4px #E58, 5px 5px #E58, 6px 6px #E58, 7px 7px #E58, 8px 8px #E58, 9px 9px #E58, 10px 10px #E58, 11px 11px #E58;
}

a.about_mail{
    margin: 0px 0px 0px 10px
}

p.about_tel1{
    margin: 10px 0px 0px 0px;
}
p.about_tel2{
    margin: 0px 0px 0px 10px;
}